<template>
	<view class="content">
		<view class="" style="width: 100vw;height: 4vh;"></view>
		<view class="" style="display: flex;">
			<view class="" >
				<view class="lefttable">
					<view class="leftjc" style="margin-top: 1vw; height: 5;" >
						<view class="lefticon" @click="syclick">
							<img :src="tximg" alt="" style="width: 4VW; height: 4vw;margin: 1vw;" />
						</view>
					</view>
						<view class="leftjc" style="margin-top: 2vw;" v-if="oneif" @click="oneclick">
							<view class="lefticon" >
								<img :src="select[0].image" alt="" style="width: 4VW; height: 4vw;margin: 1vw;" />
							</view>
							<view class="leftwz" style="color: #FFF;">
								{{select[0].name}}
							</view>
						</view>
						<view class="leftjcyes" style="margin-top: 2vw;" v-if="!oneif" >
							<view class="lefticon" >
								<img :src="selectyes[0].image" alt="" style="width: 4VW; height: 4vw;margin: 1vw;" />
							</view>
							<view class="leftwzyes" >
								{{selectyes[0].name}}
							</view>
						</view>
						<view class="leftjc" v-if="twoif" @click="twoclick">
							<view class="lefticon" >
								<img :src="select[1].image" alt="" style="width: 4VW; height: 4vw;margin: 1vw;" />
							</view>
							<view class="leftwz" >
								{{select[1].name}}
							</view>
						</view>
						<view class="leftjcyes" v-if="!twoif" >
							<view class="lefticon" >
								<img :src="selectyes[1].image" alt="" style="width: 4VW; height: 4vw;margin: 1vw;" />
							</view>
							<view class="leftwzyes" >
								{{selectyes[1].name}}
							</view>
						</view>
						<view class="leftjc" style="" v-if="theif" @click="theclick">
							<view class="lefticon" >
								<img :src="select[2].image" alt="" style="width: 4VW; height: 4vw;margin: 1vw;" />
							</view>
							<view class="leftwz" >
								{{select[2].name}}
							</view>
						</view>
						<view class="leftjcyes" style="" v-if="!theif" >
							<view class="lefticon" >
								<img :src="selectyes[2].image" alt="" style="width: 4VW; height: 4vw;margin: 1vw;" />
							</view>
							<view class="leftwzyes" >
								{{selectyes[2].name}}
							</view>
						</view>
						<view class="leftjcyes" style="" v-if="!forif">
							<view class="lefticon" >
								<img :src="selectyes[3].image" alt="" style="width: 4VW; height: 4vw;margin: 1vw;" />
							</view>
							<view class="leftwzyes" >
								{{selectyes[3].name}}
							</view>
						</view>
						<view class="leftjc" style="" v-if="forif" @click="forclick"> 
							<view class="lefticon" >
								<img :src="select[3].image" alt="" style="width: 4VW; height: 4vw;margin: 1vw;" />
							</view>
							<view class="leftwz" >
								{{select[3].name}}
							</view>
						</view>
					
				</view>	
			</view>
			<view class="" style="width: 1vw;height: 1px;"></view>
			<view class="rightcontent">
				<IndexPage v-if="page=='IndexPage'"></IndexPage>
				<psychHome v-if="page=='psychHome'"></psychHome>
				<fistpage v-if="page=='fistpage'" @changePageKnowledgeModel="changePageKnowledgeModel"></fistpage>
				<testList v-if="page=='testList'"></testList>
				<KnowledgeModel v-if="page=='KnowledgeModel'" @changePageKnowledgeModel="changePageKnowledgeModel" ></KnowledgeModel>
				<mianshi v-if="page=='mianshi'"></mianshi>
			</view>
		</view>
	</view>
</template>

<script>
	import leftmenuVue from '../common/leftmenu.vue'
	import IndexPage from '../index/index.vue'	//首页
	import psychHome from '../psychologyModel/psychHome.vue'   //心理健康测试
	import fistpage from '../knowledgeModel/firstpage/firstpage' //就业基础知识
	import testList from '../careerModel/testList/testList' //职业规划测试
	import KnowledgeModel from '../knowledgeModel/knowledge/knowledge.vue'  //就业基础知识
	import mianshi from '../mianshi/mianshi/mianshi'  //模拟面试
	export default {
		 components: {
		    leftmenuVue,
			IndexPage,
			psychHome,
			fistpage,
			testList,
			KnowledgeModel,
			mianshi
		  },
		  data() {
		  	return {
				page:'IndexPage',
				selectedMenu:'no',
				tximg:this.$baseURL +"/profile/upload/2025/05/30/wxlh_20250530231945A127.png",
				oneif:true,
				twoif:true,
				theif:true,
				forif:true,
				baseURL: this.$baseURL,
				title: '',
				one: true,
				two: false,
				three: false,
				selectyes: [{
						id: 1,
						name: "心理健康测试",
						image: this.$baseURL +
							"/profile/upload/2025/05/30/cstwo_20250530170312A108.png",
						url: "/pages/psychologyModel/psychHome"
					},
					{
						id: 2,
						name: "就业基础知识",
						image: this.$baseURL +
							"/profile/upload/2025/05/10/choose2_20250507105214A053_20250510150010A014.png",
							url: "/pages/knowledgeModel/firstpage/firstpage"
					},
					{
						id: 3,
						name: "职业规划测试",
						image: this.$baseURL +
							"/profile/upload/2025/05/10/choose3_20250507105305A054_20250510150016A015.png",
							url: "/pages/careerModel/testList/testList"
					},
					{
						id: 4,
						name: "模拟面试",
						image: this.$baseURL +
							"/profile/upload/2025/05/10/choose4_20250507105342A055_20250510150023A016.png",
							url: "/pages/mianshi/mianshi/mianshi"
					}
				],
				select: [{
						id: 1,
						name: "心理健康测试",
						image: this.$baseURL +
							"/profile/upload/2025/05/30/009-wishlist_20250530170608A109.png",
						url: "/pages/psychologyModel/psychHome"
					},
					{
						id: 2,
						name: "就业基础知识",
						image: this.$baseURL +
							"/profile/upload/2025/05/30/jczs_20250530171406A113.png",
							url: "/pages/knowledgeModel/firstpage/firstpage"
					},
					{
						id: 3,
						name: "职业规划测试",
						image: this.$baseURL +
							"/profile/upload/2025/05/10/choose3_20250507105305A054_20250510150016A015.png",
							url: "/pages/careerModel/testList/testList"
					},
					{
						id: 4,
						name: "模拟面试",
						image: this.$baseURL +
							"/profile/upload/2025/05/10/choose4_20250507105342A055_20250510150023A016.png",
							url: "/pages/mianshi/mianshi/mianshi"
					}
				]
				}
			},
			methods: {
				changePageKnowledgeModel(newPage){
					console.log("接收到就业点击事件")
					this.page = newPage;
					    this.ifMenu();  // 同步更新左侧菜单状态
				},
				ifMenu(){
					if(this.page=='psychHome'){
						this.oneif=false
						this.twoif=true
						this.theif=true
						this.forif=true
					}else if(this.page=='fistpage' || this.page=='KnowledgeModel'){
						this.oneif=true
						this.twoif=false
						this.theif=true
						this.forif=true
					}else if(this.page=='testList'){
						this.oneif=true
						this.twoif=true
						this.theif=false
						this.forif=true
					}else if(this.page=='mianshi'){
						this.oneif=true
						this.twoif=true
						this.theif=true
						this.forif=false
					}else{
						this.oneif=true
						this.twoif=true
						this.theif=true
						this.forif=true
					}
				},
				syclick(){
					this.page='IndexPage'
					this.ifMenu()
				},
				oneclick(){
					this.page='psychHome'
					this.ifMenu()
				},
				twoclick(){
					this.page='fistpage'
					this.ifMenu()
				},
				theclick(){
					this.page='testList'
					this.ifMenu()
				},
				forclick(){
					this.page='mianshi'
					this.ifMenu()
				}}
			}
			
</script>

<style lang="scss" scoped>
.lefticon{
		width: 5VW;
		height: 5vw;
		margin: 0.5vw;
		
	}
	.leftjc{
		width: 6vw;  height: 7vw;border-radius: 20px;margin-top: 4vh;
	}
	.leftjcyes{
		width: 6vw;  height: 7vw;border-radius: 20px;margin-top: 4vh;
		border-radius: 20px 0 0 20px;width: 7vw;background-color: #fff;
	}
	
	.leftwz{
	color: #FFF;	width: 6.5vw;  height: 1vw;margin-top: 0.5vh;text-align: center; font-size: 21rpx; margin-bottom: 0.5vh;
	}
	.leftwzyes{
		width: 6.5vw;  height: 1vw;margin-top: 0.5vh;text-align: center; font-size: 21rpx; margin-bottom: 0.5vh;
	}
	.rightcontent{
		width: 90vw;
		height: 96vh;
		margin-left: 1vw;
		margin-right: 1vw;
	}
	.lefttable{
		background-color: #6f88c0;
	/* 	background-color: #1296db;
		background-color: #13227a; */
		border-top-right-radius: 20px; /* 只设置右上角圆角 */
		width: 7vw;
		height: 94vh;
		padding-left: 0.5vw;
		
		padding-top: 2vh;
	}
</style>
